const path = require('path')
// 导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
	// 这是一个模板文件，也是指生成的页面是根据这个模板页面来进行的
	template: './src/index.html',
	//设置生成的预览页面名称
	filename: 'index.html'
})
const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 暴露出去所有的属性
module.exports = {
	// mode: 编译模式（development 或 production）
	// development -- 开发模式
	// production -- 生成模式 -- 线上模式
	mode: 'development',
	// 设置入口文件路径
	entry: path.join(__dirname, '/src/index.js'),
	// 设置出口文件路径
	output: {
		path: path.join(__dirname, 'dist'), //设置路径
		filename: 'bundle.js' //设置文件名
	},
	module: {
		rules: [
			{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
			{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
			{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
			{
				test: /\.jpg|png|gif|bmp|ttf|eof|svg|woff|woff2$/,
				use: 'url-loader?limit=27535'
			},
			{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
			{ test: /\.vue$/, loader: 'vue-loader' }
		]
	},
	// plugins 是配置 webpack 插件的位置，以后肯定会配置多个插件，所以写成一个数组
	// 是一个插件集合
	plugins: [
		htmlPlugin,
		new VueLoaderPlugin() // 请确保引入这个插件！
	]
}

/* 
  执行过程：

    1. npm i webpack webpack-cli -D   => 安装两个包

    2. 在根目录下，创建 webpack.config.js 文件，进行上面的配置

    3. 配置好以后，在 pageage.json 的 "script" 节点中增加 "dev" 属性，属性名为 webpack
       "script" 中的属性都可以使用 "npm run xxx" 进行访问，代表使用 node 执行的意思
       属性名为 "webpack" 代表的是 webpack 这个工具，使用 "webpack" 这个工具
*/
